<template>
    <div class="userInfo">
        <el-form :model="user" status-icon :rules="rule" ref="form" label-width="100px" class="demo-ruleForm">
          <el-form-item label="账号" prop="account">
            <el-input v-model="user.account"></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="user.nickname"></el-input>
          </el-form-item>
          <el-form-item label="姓名" prop="familyname">
            <el-input v-model="user.familyname"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input type="email" v-model="user.email"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm()">提交</el-button>
            <el-button @click="resetForm()">重置</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>

<script>
import { mapState, mapGetters,mapMutations,mapActions } from 'vuex'
export default {
    data(){
        var checkAccount = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入账号'));
            }else if(!/^1[3|4|5|7|8][0-9]{9}$/.test(value)){
                callback(new Error('账号必须为手机号码格式'));
            }else{
                callback();
            }
        };
         var checkNickname = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入昵称'));
            } else {
                callback();
            }
        };
        var checkFamilyname = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入姓名'));
            } else if (value.length < 2 || value.length > 5) {
              callback(new Error('请输入2-5个字的姓名'));
            } else {
              callback();
            }
        };
        var checkEmail = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请输入邮箱'));
            } else if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value)) {
              callback(new Error('邮箱格式不正确'));
            } else {
              callback();
            }
        };
        return{
            user:{
                account:'',
                nickname:'',
                familyname:'',
                email:''
            },
            rule: {
                account: 
                [
                    { validator: checkAccount, trigger: 'blur' }
                ],
                nickname: 
                [
                    { validator: checkNickname, trigger: 'blur' }
                ],
                familyname: 
                [
                    { validator: checkFamilyname, trigger: 'blur' }
                ],
                email: 
                [
                    { validator: checkEmail, trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
      logout(){

      },
      submitForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            alert("信息有误");
            return false;
          }
        });
      },
      resetForm() {
        this.$refs.form.resetFields();
      }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.userInfo
{
    .el-form
    {
        width:500px;
    }
}
</style>

